<template>
  <div class="products-page">
    <!-- 顶部导航 -->
    <Header />
    
    <!-- 页面标题和面包屑 -->
    <div class="page-header">
      <div class="container">
        <nav class="breadcrumb">
          <router-link to="/">首页</router-link>
          <span class="separator">/</span>
          <span class="current">商品列表</span>
        </nav>
        <h1 class="page-title">全部商品</h1>
        <p class="page-subtitle">发现心仪的华为产品</p>
      </div>
    </div>

    <!-- 主内容区 - 左右分栏布局 -->
    <div class="products-main">
      <div class="container">
        <div class="products-layout">
          <!-- 左侧筛选侧边栏 -->
          <aside class="filter-sidebar">
            <!-- 商品分类筛选 -->
            <div class="filter-section">
              <h3 class="filter-title">商品分类</h3>
              <div class="filter-content">
                <div 
                  v-for="category in categories" 
                  :key="category.id"
                  class="category-item"
                  :class="{ active: selectedCategory === category.id }"
                  @click="selectCategory(category.id)"
                >
                  <span class="category-name">{{ category.name }}</span>
                  <span class="product-count">({{ category.count }}件)</span>
                </div>
              </div>
            </div>

            <!-- 价格区间筛选 -->
            <div class="filter-section">
              <h3 class="filter-title">价格区间</h3>
              <div class="filter-content">
                <div class="price-inputs">
                  <div class="price-input-group">
                    <input 
                      type="number" 
                      v-model="priceRange.min" 
                      placeholder="最低价" 
                      class="price-input"
                    />
                    <span class="price-unit">元</span>
                  </div>
                  <span class="price-separator">-</span>
                  <div class="price-input-group">
                    <input 
                      type="number" 
                      v-model="priceRange.max" 
                      placeholder="最高价" 
                      class="price-input"
                    />
                    <span class="price-unit">元</span>
                  </div>
                </div>
                <button class="price-confirm-btn" @click="applyPriceFilter">
                  确定
                </button>
              </div>
            </div>

            <!-- 库存筛选 -->
            <div class="filter-section">
              <h3 class="filter-title">库存状态</h3>
              <div class="filter-content">
                <label class="checkbox-item">
                  <input 
                    type="checkbox" 
                    v-model="filters.inStock" 
                    @change="applyFilters"
                  />
                  <span class="checkmark"></span>
                  <span class="checkbox-label">仅显示有货</span>
                </label>
              </div>
            </div>

            <!-- 促销筛选 -->
            <div class="filter-section">
              <h3 class="filter-title">促销活动</h3>
              <div class="filter-content">
                <label class="checkbox-item">
                  <input 
                    type="checkbox" 
                    v-model="filters.onSale" 
                    @change="applyFilters"
                  />
                  <span class="checkmark"></span>
                  <span class="checkbox-label">仅显示促销商品</span>
                </label>
                <label class="checkbox-item">
                  <input 
                    type="checkbox" 
                    v-model="filters.freeShipping" 
                    @change="applyFilters"
                  />
                  <span class="checkmark"></span>
                  <span class="checkbox-label">仅显示包邮商品</span>
                </label>
              </div>
            </div>

            <!-- 品牌筛选 -->
            <div class="filter-section">
              <h3 class="filter-title">品牌</h3>
              <div class="filter-content">
                <label class="checkbox-item">
                  <input 
                    type="checkbox" 
                    v-model="filters.brandHuawei" 
                    @change="applyFilters"
                  />
                  <span class="checkmark"></span>
                  <span class="checkbox-label">华为</span>
                </label>
                <label class="checkbox-item">
                  <input 
                    type="checkbox" 
                    v-model="filters.brandHonor" 
                    @change="applyFilters"
                  />
                  <span class="checkmark"></span>
                  <span class="checkbox-label">荣耀</span>
                </label>
              </div>
            </div>

            <!-- 重置筛选 -->
            <div class="filter-actions">
              <button class="reset-filters-btn" @click="resetFilters">
                🔄 重置所有筛选
              </button>
            </div>
          </aside>

          <!-- 右侧商品展示区 -->
          <main class="products-content">
            <!-- 顶部工具栏 -->
            <div class="products-toolbar">
              <div class="toolbar-left">
                <span class="products-count">
                  共 {{ filteredProducts.length }} 件商品
                </span>
              </div>
              <div class="toolbar-right">
                <div class="sort-options">
                  <label class="sort-label">排序：</label>
                  <select v-model="sortBy" @change="applySorting" class="sort-select">
                    <option value="default">默认排序</option>
                    <option value="price_asc">价格从低到高</option>
                    <option value="price_desc">价格从高到低</option>
                    <option value="sales_desc">销量优先</option>
                    <option value="newest">最新上架</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- 商品网格 -->
            <div class="products-grid">
              <ProductCard 
                v-for="product in paginatedProducts" 
                :key="product.id"
                :product="product"
                @add-to-cart="handleAddToCart"
                @view-detail="handleViewDetail"
              />
            </div>

            <!-- 空状态 -->
            <div v-if="filteredProducts.length === 0" class="empty-state">
              <div class="empty-icon">📦</div>
              <h3 class="empty-title">暂无符合条件的商品</h3>
              <p class="empty-desc">尝试调整筛选条件或重置筛选</p>
              <button class="empty-action-btn" @click="resetFilters">
                重置所有筛选
              </button>
            </div>

            <!-- 分页控件 -->
            <div v-if="filteredProducts.length > 0" class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[12, 24, 36, 48]"
                :small="false"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filteredProducts.length"
              />
            </div>
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import ProductCard from '@/components/ProductCard.vue'

const router = useRouter()

// 筛选状态
const selectedCategory = ref('all')
const priceRange = ref({ min: '', max: '' })
const filters = ref({
  inStock: false,
  onSale: false,
  freeShipping: false,
  brandHuawei: false,
  brandHonor: false
})
const sortBy = ref('default')
const currentPage = ref(1)
const pageSize = ref(12)

// 分类数据
const categories = ref([
  { id: 'all', name: '全部商品', count: 128 },
  { id: 'phones', name: '智能手机', count: 42 },
  { id: 'tablets', name: '平板电脑', count: 15 },
  { id: 'laptops', name: '笔记本电脑', count: 8 },
  { id: 'watches', name: '智能手表', count: 12 },
  { id: 'audio', name: '音频设备', count: 23 },
  { id: 'accessories', name: '周边配件', count: 28 }
])

// 模拟商品数据
const allProducts = ref([
  {
    id: 1,
    name: 'HUAWEI Pura 70 Pro',
    price: 6999,
    originalPrice: 7999,
    image: '/src/assets/images/pura70-pro.png',
    category: 'phones',
    inStock: true,
    onSale: true,
    freeShipping: true,
    brand: 'huawei',
    sales: 1250,
    discount: 12,
    features: ['超感知影像', '鸿蒙OS', '卫星通信'],
    createdAt: '2024-01-15'
  },
  {
    id: 2,
    name: 'HUAWEI MatePad Pro',
    price: 4299,
    originalPrice: 0,
    image: '/src/assets/images/matepad-pro.png',
    category: 'tablets',
    inStock: true,
    onSale: false,
    freeShipping: true,
    brand: 'huawei',
    sales: 890,
    discount: 0,
    features: ['12.6英寸', '120Hz OLED', '麒麟9000'],
    createdAt: '2024-02-20'
  },
  {
    id: 3,
    name: 'HUAWEI Watch 4 Pro',
    price: 2999,
    originalPrice: 3299,
    image: '/src/assets/images/watch4-pro.png',
    category: 'watches',
    inStock: false,
    onSale: true,
    freeShipping: true,
    brand: 'huawei',
    sales: 456,
    discount: 9,
    features: ['eSIM独立通话', '健康监测', '21天续航'],
    createdAt: '2024-01-08'
  },
  {
    id: 4,
    name: 'HUAWEI FreeBuds Pro 3',
    price: 1499,
    originalPrice: 1699,
    image: '/src/assets/images/freebuds-pro3.png',
    category: 'audio',
    inStock: true,
    onSale: true,
    freeShipping: false,
    brand: 'huawei',
    sales: 2341,
    discount: 12,
    features: ['智能降噪', '高清音质', '超长续航'],
    createdAt: '2024-03-05'
  },
  {
    id: 5,
    name: 'HUAWEI MateBook X Pro',
    price: 8999,
    originalPrice: 9999,
    image: '/src/assets/images/matebook-xpro.png',
    category: 'laptops',
    inStock: true,
    onSale: true,
    freeShipping: true,
    brand: 'huawei',
    sales: 567,
    discount: 10,
    features: ['13.9英寸', '3K触控屏', '11代酷睿'],
    createdAt: '2024-02-10'
  },
  {
    id: 6,
    name: '荣耀Magic6 Pro',
    price: 5699,
    originalPrice: 0,
    image: '/src/assets/images/magic6-pro.png',
    category: 'phones',
    inStock: true,
    onSale: false,
    freeShipping: true,
    brand: 'honor',
    sales: 1789,
    discount: 0,
    features: ['骁龙8 Gen3', '巨犀玻璃', '鹰眼相机'],
    createdAt: '2024-03-15'
  },
  // 可以继续添加更多商品...
])

// 计算属性：筛选后的商品
const filteredProducts = computed(() => {
  let products = [...allProducts.value]

  // 分类筛选
  if (selectedCategory.value !== 'all') {
    products = products.filter(product => product.category === selectedCategory.value)
  }

  // 价格筛选
  if (priceRange.value.min || priceRange.value.max) {
    const min = priceRange.value.min ? Number(priceRange.value.min) : 0
    const max = priceRange.value.max ? Number(priceRange.value.max) : Infinity
    products = products.filter(product => product.price >= min && product.price <= max)
  }

  // 库存筛选
  if (filters.value.inStock) {
    products = products.filter(product => product.inStock)
  }

  // 促销筛选
  if (filters.value.onSale) {
    products = products.filter(product => product.onSale)
  }

  // 包邮筛选
  if (filters.value.freeShipping) {
    products = products.filter(product => product.freeShipping)
  }

  // 品牌筛选
  const brandFilters = []
  if (filters.value.brandHuawei) brandFilters.push('huawei')
  if (filters.value.brandHonor) brandFilters.push('honor')
  
  if (brandFilters.length > 0) {
    products = products.filter(product => brandFilters.includes(product.brand))
  }

  // 排序
  switch (sortBy.value) {
    case 'price_asc':
      products.sort((a, b) => a.price - b.price)
      break
    case 'price_desc':
      products.sort((a, b) => b.price - a.price)
      break
    case 'sales_desc':
      products.sort((a, b) => b.sales - a.sales)
      break
    case 'newest':
      products.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      break
    default:
      // 默认排序保持原样
      break
  }

  return products
})

// 计算属性：分页后的商品
const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredProducts.value.slice(start, end)
})

// 方法：选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
  currentPage.value = 1 // 重置到第一页
}

// 方法：应用价格筛选
const applyPriceFilter = () => {
  currentPage.value = 1
}

// 方法：应用其他筛选
const applyFilters = () => {
  currentPage.value = 1
}

// 方法：应用排序
const applySorting = () => {
  currentPage.value = 1
}

// 方法：重置所有筛选
const resetFilters = () => {
  selectedCategory.value = 'all'
  priceRange.value = { min: '', max: '' }
  filters.value = {
    inStock: false,
    onSale: false,
    freeShipping: false,
    brandHuawei: false,
    brandHonor: false
  }
  sortBy.value = 'default'
  currentPage.value = 1
}

// 方法：添加到购物车
const handleAddToCart = (product) => {
  console.log('添加到购物车:', product.name)
  // 这里可以调用购物车的 store 或 API
  ElMessage.success(`已添加 ${product.name} 到购物车`)
}

// 方法：查看详情
const handleViewDetail = (product) => {
  router.push(`/product/${product.id}`)
}

onMounted(() => {
  console.log('Products page mounted')
})
</script>

<style scoped>
.products-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 页面标题区域 */
.page-header {
  background: white;
  padding: 30px 0;
  border-bottom: 1px solid #e8e8e8;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #b30000;
}

.breadcrumb .separator {
  color: #ccc;
}

.breadcrumb .current {
  color: #b30000;
  font-weight: 500;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.page-subtitle {
  color: #666;
  font-size: 1.1rem;
}

/* 主内容布局 */
.products-main {
  padding: 30px 0 60px;
}

.products-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 左侧筛选侧边栏 */
.filter-sidebar {
  flex: 0 0 280px;
  background: white;
  border-radius: 12px;
  padding: 25px;
  position: sticky;
  top: 100px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.filter-section {
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 25px;
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.filter-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.filter-content {
  space-y: 12px;
}

/* 分类项样式 */
.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 6px;
}

.category-item:hover {
  background: #f8f9fa;
}

.category-item.active {
  background: rgba(179, 0, 0, 0.1);
  color: #b30000;
  font-weight: 500;
}

.category-name {
  flex: 1;
}

.product-count {
  color: #999;
  font-size: 0.85rem;
}

.category-item.active .product-count {
  color: #b30000;
}

/* 价格输入样式 */
.price-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.price-input-group {
  position: relative;
  flex: 1;
}

.price-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
}

.price-input:focus {
  outline: none;
  border-color: #b30000;
}

.price-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 12px;
}

.price-separator {
  color: #999;
  font-weight: 500;
}

.price-confirm-btn {
  width: 100%;
  padding: 10px;
  background: #b30000;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.price-confirm-btn:hover {
  background: #990000;
}

/* 复选框样式 */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.checkbox-item:hover {
  color: #b30000;
}

.checkbox-item input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox-item input[type="checkbox"]:checked + .checkmark {
  background: #b30000;
  border-color: #b30000;
}

.checkbox-item input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  font-size: 14px;
  user-select: none;
}

/* 重置筛选按钮 */
.filter-actions {
  margin-top: 25px;
}

.reset-filters-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-filters-btn:hover {
  border-color: #b30000;
  color: #b30000;
  background: rgba(179, 0, 0, 0.05);
}

/* 右侧商品内容区 */
.products-content {
  flex: 1;
  min-width: 0;
}

/* 工具栏样式 */
.products-toolbar {
  background: white;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.products-count {
  color: #666;
  font-size: 14px;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-label {
  color: #666;
  font-size: 14px;
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.sort-select:focus {
  outline: none;
  border-color: #b30000;
}

/* 商品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.empty-desc {
  color: #666;
  margin-bottom: 25px;
}

.empty-action-btn {
  padding: 12px 24px;
  background: #b30000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.empty-action-btn:hover {
  background: #990000;
}

/* 分页样式 */
.pagination-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .products-layout {
    flex-direction: column;
  }
  
  .filter-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .products-toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .filter-sidebar {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .price-inputs {
    flex-direction: column;
  }
}
</style>